<template>
  <view class="content">
    <view class="top" :style="{backgroundImage: 'url(' + bgImg +')'}">
      <view class="title">
        聚合管理
      </view>
      <view class="desc-item" style="top: 150rpx;left: 60rpx;">
        <view class="dot"></view>
        <view class="">自动化营销</view>
      </view>
      <view class="desc-item" style="top: 150rpx;left: 240rpx;">
        <view class="dot"></view>
        <view class="">数字化门店</view>
      </view>
      <view class="desc-item" style="top: 190rpx;left: 60rpx;">
        <view class="dot"></view>
        <view class="">智能化管理</view>
      </view>
      <view class="desc-item" style="top: 190rpx;left: 240rpx;">
        <view class="dot"></view>
        <view class="">数据化分析</view>
      </view>
    </view>
    <view class="cut-line"></view>
    <view class="adhibition">
      <view class="adhibition-box" v-for="(item, index) in defaultAppList" :key="item.id" @click="viewItem(item)">
        <view class="img-icon">
          <image :src="item.icon"></image>
        </view>
        <view class="icon-text">{{item.name}}</view>
      </view>
      <view class="adhibition-box" @click="viewMore">
        <view class="img-icon">
          <image :src="this.$store.state.imgBaseUrl + '/more.png'"></image>
        </view>
        <view class="icon-text">更多</view>
      </view>
    </view>
    <view class="shopList_wrap">
      <view class="shop-item" v-for="(item, index) in shopListData" :key="index" @click="goToPage(item)">
        <view class="title">
          {{item.title}}
        </view>
        <view class="desc">
          {{item.desc}}
        </view>
        <image :src="item.icon" mode="" class="icon"></image>
      </view>
    </view>
    
    <view class="shop-wrap" v-if="storeInfo.status != 1">
      <view class="logistics">
        <image style="width: 418rpx;height: 262rpx;text-align: center;" :src="$store.state.imgBaseUrl + '/logistics.png'" mode=""></image>
      </view>
      <block>
        <view class="setUpStep" >
          <view class="setUpTitle">
            <view class="setUpT">2步轻松线上开店</view>
            <view class="setUpDescr">展示门店特色，营销良好口碑，吸引客流</view>
          </view>
          <view class="setUpTell">
            <view class="setUpTellNumBox">
              <view class="setUpTellNum">
                <view class="num">1</view>
              </view>
              <view class="setUpTellTxt">资质认证</view>
            </view>
            <view class="setUpTellArrowsBox">
              <image style="width: 89rpx;height: 11rpx;" src="/static/image/jiantou.png" mode=""></image>
            </view>
            <view class="setUpTellNumBox">
              <view class="setUpTellNum">
                <view class="num">2</view>
              </view>
              <view class="setUpTellTxt">添加门店</view>
            </view>
          </view>
        </view>
        <view class="storeBtn">
          <button class="storeTxt" @click="toAddStore">去添加门店</button>
        </view>
      </block>
    </view>
    
    <view class="studyGrowup" v-if="activity.id">
      <view class="studyGrowuptxt">学习成长</view>
      <view class="studyBox">
        <view class="studyBoxImg">
          <image class="studyImg" style="height: 246rpx; width: 185rpx; border-radius: 10rpx;" :src="activity.urlMain" mode=""></image>
        </view>
        <view class="studyBoxTxt">
          <view class="studyBoxTitle">{{activity.activityName}}</view>
          <view class="studyBoxTime">
            <view class="timeTitle">
              <text>时间：</text>
              <text>{{activity.startTime}}</text>
            </view>
          </view>
          <view class="timeTitle">
            <text>地点：</text>
            <text>{{activity.districtName}}</text>
          </view>
          <view class="moneyBtn">
            <view class="">￥{{activity.price}}</view>
            <view class="purchaseBtn" @click="gotoActivity(activity)">
              <button class="btnTxt">立即报名</button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="cut-line"></view>
    <view class="industry">
      <view class="industry-tit">
        行业采购
      </view>
      <view class="industry-cont">
        <scroll-view scroll-x="true" style="margin: 20rpx 0; height: 60rpx;">
          <view class="common-tab">
            <view class="common-tab-text" :class="{active:item.id == selectedId, tabs: !item.id, text: item.id == selectedId}" :style="{marginRight: index == 0 ? '40rpx' : '20rpx'}" style="white-space:nowrap;" v-for="(item, index) in industryTypes" :key ="item.id" @click="clickIndustryType(item)">{{item.name}}</view>
          </view>
        </scroll-view>
        
        <view class="industry-cont-box">
          <view class="left">
            <view class="industry-cont-static" @click="goToMall">
              <image :src="$store.state.imgBaseUrl + '/caigousahngcheng.png'"></image>
            </view>
            <view class="industry-cont-goods" v-for="(item, index) in industryList" :key="item.id" @click="goToGoodsDetail(item)" v-if="index % 2 == 1">
              <view class="img">
                <image :src="item.imageUrl"></image>
              </view>
              <view class="goods-tit">
                {{item.name}}
              </view>
              <view class="goods-price">
                <view class="text1">￥{{item.price | toFixed(2)}}</view>
                <view class="text2" v-if="!item.hiddenMarketPrice">￥{{item.retailPrice | toFixed(2)}}</view>
              </view>
            </view>
          </view>
          <view class="right">
            <view class="industry-cont-goods" v-for="(item, index) in industryList" :key="item.id" @click="goToGoodsDetail(item)" v-if="index % 2 == 0">
              <view class="img">
                <image :src="item.imageUrl"></image>
              </view>
              <view class="goods-tit">
                {{item.name}}
              </view>
              <view class="goods-price">
                <view class="text1">￥{{item.price | toFixed(2)}}</view>
                <view class="text2" v-if="!item.hiddenMarketPrice">￥{{item.retailPrice | toFixed(2)}}</view>
              </view>
            </view>
          </view> 
        </view>
      </view>
      <!-- <view class="loading">{{loadingText}}</view> -->
    </view>
    <common-free-store :isFreeStore="isFreeStore" @closeFreeStorePop="closeFreeStorePop"></common-free-store>
  </view>
  
  <!-- <view class="workBench-wrap">
    <view class="apps_wrap">
      <block v-for="item in defaultAppList" :key="item.id">
        <image :src="item.icon" mode="" class="app_img"></image>
        <view class="">{{item.name}}</view>
      </block>  
    </view>
    <view class="" style="display: flex;margin-left: 10px;">
      <block v-for="item in industryTypes" :key="item.id">
        <view class="" @click="clickIndustryType(item)" style="flex: 1;">
          <view class="">
            {{item.name}}
          </view>
        </view>
      </block>
    </view>
    <block v-for="item in industryList" :key="item.id">
      <view class="">
        {{item.id}}
      </view>
    </block>
  </view> -->
</template>

<script>
import { finduserApps, categoryAll, categoryShops, hotSale, queryFindPage } from "@/service/workbench/workbench.service.js"
import { getStoreInfo } from "@/service/storeManage/storeManage.service.js"
import commonFreeStore from '@/components/common-freeStore/index.vue'
export default {
  components: {
    commonFreeStore
  },
  data () {
    return {
      bgImg: '/static/image/capacity.png', // 头部背景图
      shopListData: [
        { title: '促销采购区', icon: '/static/image/caigou.png', desc: '1-3折好货', url: '/pages/purchaseShop/index', value: 1 },
        { title: '兑换商城', icon: '/static/image/duihuan.png', desc: '好货等你挑', url: '/pages/exchangeMall/exchangeMall', value: 2 },
        { title: '自营严选', icon: '/static/image/fuli.png', desc: '分享有奖', url: '/pages/welfareMall/welfareMall', value: 3 },
      ],
      defaultAppList: [], // 工作台应用列表
      industryList: [], // 行业采购数据
      industryTypes: [], // 行业采购分类列表
      selectedId: null, // 选中的行业分类ID
      storeInfo: {
        status: null
      }, // 店铺信息
      activity: {
        id: null,
        activityName: null, // 活动名称
        startTime: null, // 活动时间
        districtName: null, // 活动地点
        price: null, // 活动价格
        urlMain: null // 图片链接地址
      }, // 活动
      pageInfo: { // 分页信息
        current: 1,
        size: 10,
        total: 0
      },
      isFreeStore: false,
      myInfo: {}
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo; // 是否是免费入驻商户 
    }
  },
  onReachBottom () {
    if (this.pageInfo.current == 1) {
      return false;
    } else if (this.pageInfo.total > this.industryList.length) {
      this.getIndustryList();
    } else if (this.pageInfo.current != 1) {
      uni.showToast({
        title: '已经到底了',
        icon: 'none'
      })
    }
  },
  mounted() {
    this.getIndustryList();
    this.getIndustryTypes(); 
  },
  onShow() {
    this.getDefaultList();
    this.getStoreInfoByUserId();
    this.getActivityList();
  },
  methods: {
    closeFreeStorePop () {
      this.isFreeStore = false;
    },
    goToMall () { // 去采购商城
      uni.navigateTo({
        url: '/pages/purchaseShop/index'
      });
    },
    goToGoodsDetail(item) { // 去商品详情
      uni.navigateTo({
        url: '/pages/purchaseShop/goodsDetail?id=' + item.id
      });
    },
    gotoActivity(item) { // 去会务页面
      // #ifdef H5
      let currentJumpOrigin = null;
      if (window.location.origin.indexOf('//martweb') !== -1 ) {
        currentJumpOrigin = window.location.protocol + '//act.tofire.cn/activityDetail';
      } else {
        currentJumpOrigin = window.location.protocol + '//testact.tofire.cn/activityDetail';
      }
      try {
        let token = uni.getStorageSync('user_token');
        window.location.href = currentJumpOrigin + '?id=' + item.id + '&token=' + token;
      } catch(e) {
        //TODO handle the exception
      }
      // #endif
    },
    toAddStore () { // 去添加门店
      if (!this.storeInfo.status && this.storeInfo.status != 0) {
        uni.navigateTo({
          url: '/pages/storeManage/index'
        });
      } else {
        uni.navigateTo({
          url: '/pages/storeManage/result'
        });
      }
    },
    viewItem(item) { // 查看单个应用
      if (item.url == '/pages/privateFlow/index' && this.$store.state.userInfo.isHaveStore == 1) {
        uni.navigateTo({
          url: '/pages/privateFlow/index'
        });
      } else {
        uni.navigateTo({
          url: item.url
        });
      }
      
    },
    viewMore () { // 查看更多应用
      uni.navigateTo({
        url: 'viewMore'
      });
    },
    goToPage (item) { // 跳转页面
      // #ifdef H5
      let currentJumpOrigin = null;
      if (window.location.origin.indexOf('//martweb') !== -1 ) {
        currentJumpOrigin = window.location.protocol + '//buyerweb.tofire.cn';
      } else {
        currentJumpOrigin = window.location.protocol + '//testbuyerweb.tofire.cn';
      }
      try {
        let token = uni.getStorageSync('user_token');
        switch (item.value) {
        case 1: // 采购商城
          if (this.userInfo.rank < 2 && this.userInfo.freeStore) {
            this.isFreeStore = true;
          } else {
            uni.navigateTo({
              url: item.url
            })
          }
          break;
        case 2: // 兑换商城
          window.location.href = currentJumpOrigin + item.url + '?token=' + token;
          break;
        case 3: // 自营严选
          window.location.href = currentJumpOrigin + item.url + '?token=' + token;
          break;
        default: 
        }
      } catch(e) {
        //TODO handle the exception
      }
      // #endif
      
    },
    getActivityList () { // 拿取活动列表，只展示第一条
      let params = {
        current: 1,
        size: 1,
        status: 0
      };
      queryFindPage(params, res => {
        if (res.status == 0 && res.data.records && res.data.records.length > 0) {
          this.activity = res.data.records[0];
        }
      });
    },
    getStoreInfoByUserId () { // 获取门店信息
      getStoreInfo({}, res => {
        if (res.status == 0) {
          if (res.data) {
            this.storeInfo.status = res.data.status;
          }
        }
      });
    },
    getDefaultList () { // 获取工作台列表
      finduserApps({}, res => {
        if (res.status == 0) {
          this.defaultAppList = (res.data.defaultApps && res.data.defaultApps.length > 0) ? res.data.defaultApps.slice(0, 9) : [];
        }
      });
    },
    getIndustryTypes () { // 获取行业分类列表
      categoryAll({}, res => {
        if (res.status == 0) {
          this.industryTypes = res.data;
          this.industryTypes.unshift({
            id: null,
            name: '全部'
          })
        }
      });
    },
    clickIndustryType (item) { // 点击行业分类去查询商品
      if (item.id != this.selectedId) {
        this.pageInfo.current = 1;
        this.selectedId = item.id;
        this.getIndustryList();
      }
    },
    getIndustryList () { // 获取行业分类列表
      uni.showLoading();
      let params = {
        current: this.pageInfo.current,
        size: this.pageInfo.size,
        tagId: this.selectedId
      }
      categoryShops(params, res => {
        if (res.status == 0) {
          if (this.pageInfo.current == 1) {
            this.industryList = res.data.records;
          } else {
            this.industryList = this.industryList.concat(res.data.records);
          }
          this.pageInfo.total = res.data.total;
          if (this.pageInfo.total > this.industryList.length) {
            this.pageInfo.current ++;
          }
        }
        uni.hideLoading();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  image {
    width: 100%;
    height: 100%;
  } 
  .content {
    // height: 100vh;
    background-color: #FFFFFF;
    
    .cut-line {
      height: 20rpx;
      background: #FAFAFA;
    }
    .top {
      position: relative;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 270rpx;
      .title {
        font-size: 46rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #434343;
        top: 68rpx;
        left: 60rpx;
        position: absolute;
      }
      .desc-item {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        position: absolute;
        display: flex;
        align-items: center;
        
        .dot {
          width: 6rpx;
          height: 6rpx;
          background: #666666;
          border-radius: 50%;
          margin-right: 8rpx;
        }
      }
    }
    
    .shopList_wrap {
      display: flex;
      justify-content: space-between;
      padding: 0 30rpx;
      .shop-item {
        position: relative;
        width: 224rpx;
        height: 118rpx;
        border: 2rpx solid #E1E1E1;
        border-radius: 10rpx;
        .title {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          position: absolute;
          top: 16rpx;
          left: 14rpx;
        }
        .desc {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          position: absolute;
          top: 54rpx;
          left: 14rpx;
        }
        .icon {
          position: absolute;
          top: 70rpx;
          left: 150rpx;
          width: 56rpx;
          height: 56rpx;
        }
      }
    }
    
    
    
    .shop-wrap {
      .logistics {
        text-align: center;
      }
      .storeBtn {
        padding: 50rpx;
        .storeTxt {
          background-color: #434343;
          color: #F6DA99;
          font-size:30rpx;
          font-weight:500;
        }
      }
      .setUpStep {
        // margin-top: 60rpx;
        .setUpTitle {
          text-align: center;
          .setUpT {
            font-size:36rpx;
            font-weight:600;
            color:#333333;
          }
          .setUpDescr {
            font-size:26rpx;
            color:#999999;
            margin-top: 24rpx;
          }
        }
        .setUpTell {
          display: flex;
          justify-content: space-between;
          margin-top: 47rpx;
          padding: 0 112rpx;
          .setUpTellNumBox {
            .setUpTellNum {
              width:46rpx;
              height:46rpx;
              margin: auto;
              background:#666666;
              border-radius:50%;
              .num {
                text-align: center;
                line-height: 46rpx;
                font-size:22rpx;
                font-weight:500;
                color:#FFFFFF;
              }
            }
          }
          .setUpTellTxt {
            margin-top: 12rpx;
            color: #666666;
            font-size:22rpx;
            font-weight:500;
          }
        }
      }
    }
    
    .studyGrowup {
      padding: 43rpx 30rpx;
      background-color: #FFFFFF;
      .studyGrowuptxt {
        // margin-top: 43rpx;
        font-size: 36rpx;
        color: #333;
      }
      // 学习成长
      .studyBox {
        // 盒子上左部分--图片
        margin-top: 31rpx;
          padding: 21rpx;
        box-shadow:0rpx 0px 21rpx 0rpx rgba(73,53,5,0.22);
        border-radius:15rpx;
        display: flex;
        // 盒子下半部分
        .studyBoxTxt {
          width: 100%;
          // position: relative;
          padding: 11rpx 25rpx;
          .studyBoxTitle {
            font-size: 28rpx;
          }
          .timeTitle text{
            font-size: 22rpx;
            color: #999;
          }
          .moneyBtn {
            display: flex;
            justify-content: space-between;
            margin-top: 45rpx;
            .purchaseBtn {
              .btnTxt {
                font-size: 24rpx;
                color: #F6DA99;
                background-color: #434343;
              }
            }
          }
        }
      }
    }
  }
  .adhibition {
    padding: 45rpx 40rpx 0;
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    &-box {
      width: 20%;
      margin-bottom: 50rpx;
      .img-icon {
        width: 60rpx;
        height: 60rpx;
        margin: 0 auto;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .icon-text {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51,51,51,1);
        text-align: center;
      }
    }
  }
  .industry {
    padding: 0 30rpx 50rpx;
    background-color: #FFFFFF;
    &-tit {
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51,51,51,1);
      padding: 42rpx 0 20rpx;
    }
    &-cont {
      padding-bottom: 100rpx;
    }
    .common-tab-text {
      // margin-right: 15rpx !important;
    }
  }
  .industry-cont-box {
     // column-count:2;//必须加上break-inside: avoid;
     // -webkit-column-break-inside:avoid;
     // column-width:340rpx; //设置列宽
     // column-gap:10rpx; //设置间隙
     display: flex;
     justify-content: space-between;
     .left {
       width: 340rpx;
     }
     .right {
       width: 340rpx;
     }
    .industry-cont-static {
      width: 340rpx;
      height: 200rpx;
      display: inline-block;
      // break-inside:avoid;
    }
    .industry-cont-goods {
      width: 340rpx;
      // height: 466rpx;
      background-color: #FAFAFA;
      border: 1px solid #E1E1E1;
      border-radius: 10rpx;
      // break-inside: avoid;//这个很重要，不然会中断
      margin-bottom: 20rpx;
      .img {
        width: 340rpx;
        height: 340rpx;
      }
      .goods-tit {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(51,51,51,1);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        padding: 15rpx 10rpx 37rpx;
      }
      .goods-price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 10rpx 19rpx;
        .text1 {
          font-size: 36rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(34,34,34,1);
        }
        .text2 {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(153,153,153,1);
          text-decoration: line-through;
        }
      }
    }
  }
  // .workBench-wrap {
  //   .app_img {
  //     width: 80rpx;
  //     height: 80rpx;
  //   }
  // }
</style>
